<template>
    <div class="container">
        <a-tabs v-model="tabType">
            <a-tab-pane key="1" tab="页面" :disabled="initialized">
                <!-- <a-row style="margin: 10px 0;">
                    <a-col :span="10" style="text-align: right;">尺子：</a-col>
                    <a-col :span="10">
                        <a-switch></a-switch>
                    </a-col>
                </a-row>
                <a-row style="margin: 10px 0;">
                    <a-col :span="10" style="text-align: right;">吸附：</a-col>
                    <a-col :span="10">
                        <a-switch></a-switch>
                    </a-col>
                </a-row>
                <a-row style="margin: 10px 0;">
                    <a-col :span="10" style="text-align: right;">对齐线：</a-col>
                    <a-col :span="10">
                        <a-switch></a-switch>
                    </a-col>
                </a-row>
                <a-row style="margin: 10px 0;">
                    <a-col :span="10" style="text-align: right;">网格背景：</a-col>
                    <a-col :span="10">
                        <a-switch></a-switch>
                    </a-col>
                </a-row> -->
                <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
                    v-if="!initialized">
                    <a-form-model-item label="背景填充色" prop="background">
                        <el-color-picker v-model="form.background" show-alpha @change="bgChange"></el-color-picker>
                    </a-form-model-item>
                    <a-form-model-item label="图片填充色" prop="color">
                        <el-color-picker v-model="form.color" show-alpha @change="bgChange"></el-color-picker>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2" tab="素材" :disabled="!initialized">
                <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
                    v-if="initialized">
                    <a-form-model-item label="填充色" prop="fill" v-if="this.models.name !== 'arrow'">
                        <el-color-picker v-model="form.fill" show-alpha @change="onChange('fill')"></el-color-picker>
                    </a-form-model-item>
                    <a-form-model-item label="边框色" prop="stroke">
                        <el-color-picker v-model="form.stroke" show-alpha
                            @change="onChange('stroke')"></el-color-picker>
                    </a-form-model-item>
                    <a-form-model-item label="边框宽" prop="strokeWidth">
                        <a-input-number :min="1" v-model="form.strokeWidth"
                            @change="onChange('strokeWidth')"></a-input-number>
                    </a-form-model-item>
                    <a-form-model-item label="圆角" prop="cornerRadius" v-if="this.models.name === 'rect'">
                        <a-slider v-model="form.cornerRadius" @change="onChange('cornerRadius')" />
                    </a-form-model-item>
                    <a-form-model-item label="文本内容" prop="text" v-if="this.models.name === 'text'">
                        <a-input v-model="form.text" @change="onChange('text')"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="字体大小" prop="fontSize" v-if="this.models.name === 'text'">
                        <a-input-number :min="1" v-model="form.fontSize"
                            @change="onChange('fontSize')"></a-input-number>
                    </a-form-model-item>
                    <a-form-model-item label="字体样式" prop="fontFamily" v-if="this.models.name === 'text'">
                        <a-input v-model="form.fontFamily" @change="onChange('fontFamily')"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="多边" prop="sides" v-if="this.models.name === 'polygon'">
                        <a-input-number :min="3" :max="100" v-model="form.sides" @change="onChange('sides')"
                            placeholder=""></a-input-number>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import { events } from '@/views/LeaferJS/utils/emit'

// 定义需要同步的字段
const SYNCED_FIELDS = ['fill', 'stroke', 'strokeWidth', 'cornerRadius', 'text', 'fontSize', 'fontFamily', 'sides']
export default {
    data() {
        return {
            labelCol: { span: 10 },
            wrapperCol: { span: 10 },
            form: {},
            models: null,
            tabType: '1',
            initialized: false, // 新增：用于控制表单渲染时机
            render: null,
        }
    },
    mounted() {
        events.on('event', this.handleModelUpdate)
        events.on('init', this.initPage)
    },
    methods: {
        initPage(view) {
            this.render = view
            this.$set(this.form, 'color', this.render.color)
            this.$set(this.form, 'background', this.render.background)
        },
        handleModelUpdate(models) {
            if (models && models.name !== 'image') {
                this.models = models
                this.form = SYNCED_FIELDS.reduce((acc, key) => {
                    if (key && this.models[key] !== undefined) {
                        acc[key] = this.models[key]
                    }
                    return acc
                }, {})
                this.tabType = '2'
                this.initialized = true // 初始化完成，允许渲染表单
            } else {
                this.tabType = '1'
                this.initialized = false
            }
        },
        onChange(field) {
            // 只更新models中的特定属性
            if (this.models && SYNCED_FIELDS.includes(field)) {
                this.$set(this.models, field, this.form[field])
            }
        },
        bgChange() {
            this.render.background = this.form.background
            this.render.color = this.form.color
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
    },
    beforeDestroy() {
        events.off('event', this.handleModelUpdate)
    }
}
</script>

<style lang='less' scoped></style>